<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avater_box">
        <!--头像区域-->
        <img id="img1" src="../assets/logo1.jpg" />
      </div>
      <!-- 表单区域 -->
      <el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginRules" ref="loginRef">
        <el-form-item prop="username"><!-- /*用户名 */ -->
          <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password"><!-- 密码 -->
          <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input><!-- 第三方图标库阿里 -->
        </el-form-item>
          <el-form-item class="btns"><!-- 按钮 -->
          <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetLoginform">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- copyright -->
    <div class="copyright">
         <h2>Copyright &copy; 2020 - {{nowYear}} 版权所有| by
             <a href="#">YanfengZhang</a>
          </h2>
      </div>
      <!-- //copyright -->
        </div>
</template>

<script>
export default {
  data () {
    return { /* 这是登录表单的数据绑定对象 */
      loginForm: {
        username: '',
        password: ''

      },
      loginRules: { /* 验证用户名是否合法 */
        username: [ // 用户验证规则
          { required: true, message: '请输入用户名!', trigger: 'blur' }, // 什么时候触发什么错误
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        /* 验证密码是否合法 */
        password: [
          { required: true, message: '请输入密码!', trigger: 'blur' }, // 什么时候触发什么错误
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      },
      nowYear: new Date().getFullYear()
    }
  },
  methods: {
    // 点击重置按钮，清空表单S
    resetLoginform: function () { // 重置按钮
      // console.log(this)
      this.$refs.loginRef.resetFields();// 调用resetFields方法
    },
    login: function () { // 登录的验证方法
      this.$refs.loginRef.validate(async (valid) => {
        // console.log(valid);登录预校验
        if (!valid) return false;
        const { data: res } = await this.$http.post('login', this.loginForm);// axios异步发送数据
        // console.log(res);
        if (res.meta.status !== 200) {
          return this.$message.error('登录失败!');
        }
        this.$message.success('登录成功!');
        /* 在进行登陆成功以后，需要将登录的信息状态保存到token中去。至于token保存到sessionStorage中
      原因是在所有项目的接口中，都需要在登陆以后才可以访问
      因为token只需要在项目打开期间生效，所以存储在sessionstorage中
      登录成功以后通过编程时导航跳转到/home 接口 */
        // console.log(res);
        window.sessionStorage.setItem('token', res.data.token);// 将token保存到sessionStorage中
        this.$router.push('/home');
      });
    }

  }

}
</script>

<style lang="less" scoped>
.btns{
display: flex;
justify-content: flex-end;
}
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  .avater_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form{
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.copyright{
  font-size: 5px;
line-height: 10px;
position: absolute;

bottom: 0px;
width: 100%;
margin: 0 auto;
background-color: rgba(199, 195, 195,0.4);
text-align: center;
}
.copyright a{
  text-decoration: none;
}
.copyright a:hover{
  color: red;
}
</style>
